<template>
	<view class="container">
		<view class="form">

			<view class="form-item">
				<text class="form-label">上传图片：</text>
				<button @click="handleUpload">
					<image class="preview-image" :src="goodsItem.shop_url"></image>
				</button>
			</view>
			<view class="form-item">
				<text class="form-label">商品名称：</text>
				<input class="form-input" type="text" v-model="goodsItem.shop_name" />
			</view>
			<view class="form-item">
				<text class="form-label">所需积分：</text>
				<input class="form-input" type="number" v-model.number="goodsItem.shop_score" />
			</view>
			<view class="form-item">
				<text class="form-label">商品数量：</text>
				<input class="form-input" type="number" v-model.number="goodsItem.amount" />
			</view>
			<view class="form-item">
				<text class="form-label">商品详情：</text>
				<textarea class="form-textarea" v-model="goodsItem.shop_content"></textarea>
			</view>

			<view class="form-item">
				<button class="submit-button" @click="submitForm">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		patriarchShopAdd,
		patriarchShopUpdate,
		publicUpload
	} from '@/api/api.js'
	export default {
		name: "shopForm",
		props: {
			goodsItem: {
				type: Object,
				required: true
			},
			inputType: {
				type: String,
				required: true
			}
		},
		data() {
			return {

			};
		},
		methods: {
			handleUpload() {
				uni.chooseImage({
					success: (res) => {
						const tempFilePaths = res.tempFilePaths
						console.log(tempFilePaths[0])
						publicUpload(tempFilePaths[0]).then(res => {
							let data = JSON.parse(res.data)
							console.log(data)
							this.goodsItem.shop_url = data.data
						})
					}
				})
			},
			submitForm() {
				console.log(this.goodsItem)
				console.log(this.inputType)
				if (this.inputType == "add") {
					patriarchShopAdd(this.goodsItem).then(res => {
						console.log(res.data)
						if (res.data.code != 0) {
							uni.showToast({
								icon: "none",
								title: res.data.message
							})
						} else {
							uni.reLaunch({
								url: '/pages/shop/shop'
							});
						}
					})
				}
				if (this.inputType == "update") {
					patriarchShopUpdate(this.goodsItem).then(res => {
						console.log(res.data)
						if (res.data.code != 0) {
							uni.showToast({
								icon: "none",
								title: res.data.message
							})
						} else {
							uni.reLaunch({
								url: '/pages/shop/shop'
							});
						}
					})
				}
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: #f2f2f2;
	}

	.form {
		width: 80%;
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 0 10px #ccc;
	}

	.form-item {
		display: flex;
		flex-direction: column;
		margin-bottom: 20px;
	}

	.form-label {
		font-size: 16px;
		margin-bottom: 10px;
	}

	.form-input,
	.form-textarea {
		border: none;
		border-radius: 5px;
		padding: 10px;
		font-size: 16px;

		color: #333;
		background-color: #f2f2f2;
	}

	.form-textarea {
		height: 200rpx;
	}

	.picker {
		color: #333;
		font-size: 16px;
	}

	.submit-button {
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 5px;
		padding: 10px 20px;
		font-size: 16px;
		cursor: pointer;
	}

	.submit-button:hover {
		background-color: #0066cc;
	}

	.image-upload {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-bottom: 20px;
	}

	.image-upload-label {
		font-size: 16px;
		margin-bottom: 10px;
	}

	.preview-image {
		width: 200rpx;
		height: 200rpx;
		margin-top: 10px;
		margin-bottom: 10px;

		object-fit: cover;
		background-color: #f5f5f5;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
	}

	.upload-button {
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 5px;
		padding: 10px 20px;
		font-size: 16px;
		cursor: pointer;
	}

	.upload-button:hover {
		background-color: #0066cc;
	}

	@media screen and (max-width: 768px) {
		.form {
			width: 90%;
		}
	}
</style>